<!--
 * @Author: 'zhangkeqq' '2211709169@qq.com'
 * @Date: 2025-06-21 16:08:37
 * @LastEditors: your name
 * @LastEditTime: 2025-07-03 16:43:28
 * @FilePath: \vue3-admin\src\views\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="home">
    <el-card>
      <div class="card-box">
        <div class="left">
          <img :src="userStore.avatar" />
        </div>
        <div class="right">
          <h1>{{getTime()}}好{{ userStore.username }}</h1>
          <p>硅谷甄选运营平台</p>
        </div>
      </div>

    </el-card>
    <div class="content">
      <SvgIcon name="welcome" width="500px" height="300px"></SvgIcon>
    </div>
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user'
import {getTime} from '@/utils/time'
const userStore = useUserStore()
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  .card-box {
    display: flex;
    .left {
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
    }
    .right {
      margin-left: 20px;
       display: flex;
       flex-direction: column;
       justify-content: space-evenly;
      p {
        font-style: italic;
        color: #f1f1f1;
      }
      h1{
        font-size: 28px;
        font-weight: bold;
      }
    }
  }

}
  .content{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
  }
</style>